<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script>
        function f1() {
            let s = setInterval(function () {
                let image = document.getElementById("image");
                image.style.left = parseInt(image.style.left) + 50 + "px";
            }, 100);

            setTimeout(function () {
                clearInterval(s);
            }, 4000)
        }

        function f2() {
            let s = setInterval(function () {
                let d2 = document.getElementById("d2");
                if (parseInt(d2.style.width) < 100) {
                    d2.style.width = parseInt(d2.style.width) + 2 + "%";
                }
            }, 100);
        }

        function fn(s) {
            s = "0" + s;
            return s.substring(s.length - 2);
        }

        window.onload = function () {
            setInterval(function () {
                let date = new Date();
                document.getElementById("time").innerHTML = date.getFullYear() + "年" + fn(date.getMonth() + 1) + "月" + fn(date.getDate()) + "日 " + fn(date.getHours()) + ":" + fn(date.getMinutes()) + ":" + fn(date.getSeconds());
            }, 100)
        }

    </script>
</head>
<body>
<img id="image" src="../images/heihei.gif" onmouseover="f1()" style="position: relative;left: 0px">
<div class="c1" style="width: 1000px;height: 50px;border: 1px solid;">
    <div id="d2" class="c2" style="height: 100%;width: 2%;background-color: red;" onclick="f2()"></div>
</div>
<!--
    在浏览器打印当前时间,要求时间格式为:yyyy年MM月dd日 HH:mm:ss
    且时间的一直变化的,跟随着时间的变化,显示的时间也是跟着变化
-->
<span id="time"></span>
</body>
</html>